<template>
  <div id="app" class="container">
    <!-- 导航组件 -->
    <nav-bar></nav-bar>
    <!-- 内容 -->
    <div class="row">
      <div class="col-md-2">
        <!-- 侧边栏组件 -->
        <my-aside></my-aside>
      </div>
      <div class="col-md-10">
        <!-- 路由组件router-view 指定路由对应的组件显示的位置-->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
// NavBar 相对于组件配置对象 {template:'<div>内容</div>'}
import NavBar from "./components/NavBar.vue"
// MyAside 相对于组件配置对象 {template:'<div>内容</div>'}
import MyAside from "./components/MyAside.vue"
export default {
  // 组件的配置选项，代表组件名字的标识。
  name: "App",
  // 注册组件
  components: { NavBar, MyAside}
};
</script>
